<template>
	<view class="container">
		<!-- 标题 -->
		<view class="page-title flex-y-center">
			<image src="/static/images/dizhi.png" class="img"></image>
			<view>请填写详细地址，我们将按此地址发货</view>
		</view>
		<form @submit="formSubmit">
			<!-- 表单组件 -->
			<view class="form-wrapper">
				<view class="flex-y-center list">
					<view class="name flex-grow-0">联系人</view>
					<input placeholder="名字" class="flex-grow-1" name='name' :value="address ? address.name : ''" />
				</view>
				<view class="flex-y-center list">
					<view class="name flex-grow-0">手机号码</view>
					<input placeholder="电话" class="flex-grow-1" name="mobile" :value="mobile" />
				</view>
			<!-- 	<view class="flex-y-center list">
					<view class="name flex-grow-0">选择地址</view>
					<input class="flex-grow-1" placeholder-style="color:#c1c1c1" placeholder="请获取所在区域" @input="libspoi"
						:value="province+city+district+addr" name="address" :disabled="true" />
					<view class="flex-y-center flex-grow-0" @tap="getaddress">
						<image src="/static/images/919.png" class="icon"></image>
						<view>定位</view>
					</view>
				</view> -->
				<view class="flex-y-center list">
					<view class="name flex-grow-0">选择地址</view>
					<picker @change="bindPickerChange" @columnchange="bindColumnchange" mode="multiSelector" :value="multiIndex" :range="[provinceList,cityList,districtList]" :range-key="'name'">
						<view class="picker">
							{{province}} {{city}} {{district}}
						</view>
					</picker>

				</view>
				<view class="flex list">
					<view class="name flex-grow-0">详细地址</view>
					<textarea placeholder="小区名称/乡村名称" class="flex-grow-1 area" name="addr"
						:value="address ? address.addr : ''"></textarea>
				</view>
			</view>
			<!-- 操作按钮 -->
			<view class="footer">
				<view class="btn-wrapper">
					<button class="btn-item btn-item-main" form-type="submit">保存</button>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		My
	} from '../../../apirequest/my-model.js';
	var m = new My();
	var QQMapWX = require('../../../utils/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	export default {
		data() {
			return {
				address: '',
				name: '',
				addr: '',
				lat: '',
				lng: '',
				province: '',
				province_code: '',
				city: '',
				city_code:'',
				district: '',
				district_code:'',
				id: 0,
				mobile: '',
				multiIndex:[0,0,0],
				provinceList:[],
				cityList:[],
				districtList:[]
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			if (options.id) {
				this.id = options.id
			}
			qqmapsdk = new QQMapWX({
				key: 'OEABZ-7XQKD-RWO4J-PFKSN-EH5YF-NRBSH'
			});
			this._index();
		},

		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {

		},

		methods: {
			bindPickerChange: function(e) {
				this.multiIndex = e.detail.value
				this.province = this.provinceList[this.multiIndex[0]].name
				this.province_code = this.provinceList[this.multiIndex[0]].code
				this.city = this.cityList[this.multiIndex[1]].name
				this.city_code = this.cityList[this.multiIndex[1]].code
				this.district = this.districtList[this.multiIndex[2]].name
				this.district_code = this.districtList[this.multiIndex[2]].code
			},
			bindColumnchange(e){
				var column = e.detail.column
				var value = e.detail.value				
				if(column ==0){
					if(value > 0){
						this.cityList = [{id:0,name:'选择市',code:''}].concat(this.provinceList[value].child)
						this.districtList = [{id:0,name:'选择区/县',code:''}]
						this.multiIndex = [value,0,0]
					}	
				}else if(column ==1){
					if(value > 0){
						this.districtList = [{id:0,name:'选择区/县',code:''}].concat(this.cityList[value].child)
						this.multiIndex[2] = 0
					}
					
				}
			},
			_index() {
				var that = this;
				if (this.id) {
					m.get_addr_detail({
						id: this.id
					}, (res) => {
						if (res.code == 1) {
							that.address = res.data
							this.addr = res.data.addr
							this.lat = res.data.lat
							this.lng = res.data.lng
							this.province = res.data.province
							this.province_code = res.data.province_code
							this.city = res.data.city
							this.city_code = res.data.city_code
							this.district = res.data.district
							this.district_code = res.data.district_code
							this.mobile = res.data.mobile
						}
						that._getArea()
					})
				} else {
					that._getArea()
					this.mobile = uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').mobile : ''
				}
			},
			_getArea(){
				var that = this;
				m.get_area((res) => {
					if(res.code == 1){
						var multiIndex = [0,0,0],
							provinceList =[{id:0,name:'选择省',code:''}],
							cityList=[{id:0,name:'选择市',code:''}],
							districtList=[{id:0,name:'选择区/县',code:''}];
							that.provinceList = provinceList.concat(res.data)
							if(that.province){
								that.provinceList.forEach((e,i) => {
									if(that.province_code == e.code){
										multiIndex[0] = i;
										that.cityList =cityList.concat(e.child ) 
										that.cityList.forEach((e1,i1) => {
											if(that.city_code == e1.code){
												multiIndex[1] = i1;
												that.districtList = districtList.concat(e1.child)
												that.districtList.forEach((e2,i2) => {
													if(that.district_code == e2.code){
														multiIndex[2] = i2;
													}
												})
											}
										})
									}
								})
							}else{
								that.cityList =cityList.concat(res.data[0].child) 
								that.districtList =districtList.concat(res.data[0].child[0].child) 
						
								that.city = '请选择收货区域'
							}
							that.multiIndex = multiIndex
					}
				})
			},
			//获取地址
			getaddress: function() {
				var _this = this
				this.getUserLocation()

			},
			formSubmit(e) {
				var param = e.detail.value;
				param.id = this.id
				// param.addr = this.addr;
				param.lat = this.lat
				param.lng = this.lng
				param.province = this.province
				param.province_code = this.province_code
				param.city = this.city
				param.city_code = this.city_code
				param.district = this.district
				param.district_code = this.district_code
				if (param.province_code == '' || param.city_code == '' || param.district_code == '') {
					uni.showToast({
						title: '请选择收货区域',
						icon: 'none'
					})
					return false;
				}
				if (param.name == '' || !param.name) {
					uni.showToast({
						title: '请输入联系人',
						icon: 'none'
					})
					return false;
				}
				if (param.mobile == '' || !param.mobile) {
					uni.showToast({
						title: '请输入联系方式',
						icon: 'none'
					})
					return false;
				}
				if (param.addr == '' || !param.addr) {
					uni.showToast({
						title: '请选择地址',
						icon: 'none'
					})
					return false;
				}
				m.addr_save(param, (res) => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack({
								delta: My
							})
						}, 1000)
					}
				})
			},
			//位置
			getUserLocation: function() {
				let vm = this;
				uni.getSetting({
					success: (res) => {

						// res.authSetting['scope.userLocation'] == undefined    表示 初始化进入该页面
						// res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权
						// res.authSetting['scope.userLocation'] == true    表示 地理位置授权
						if (res.authSetting['scope.userLocation'] != undefined && res.authSetting[
								'scope.userLocation'] != true) {
							uni.showModal({
								title: '请求授权当前位置',
								content: '需要获取您的地理位置，请确认授权',
								success: function(res) {
									if (res.cancel) {
										uni.showToast({
											title: '拒绝授权',
											icon: 'none',
											duration: 1000
										})

									} else if (res.confirm) {
										uni.openSetting({
											success: function(dataAu) {
												if (dataAu.authSetting[
														"scope.userLocation"] ==
													true) {
													uni.showToast({
														title: '授权成功',
														icon: 'success',
														duration: 1000
													})
													//再次授权，调用wx.getLocation的API
													vm.getLocation();
												} else {
													uni.showToast({
														title: '授权失败',
														icon: 'none',
														duration: 1000
													})

												}
											}
										})
									}
								}
							})
						} else if (res.authSetting['scope.userLocation'] == undefined) {
							//调用wx.getLocation的API
							vm.getLocation();
						} else {
							//调用wx.getLocation的API
							vm.getLocation();
						}
					}
				})
			},
			// 微信获得经纬度
			getLocation: function() {
				let vm = this;
				uni.chooseLocation({
					type: 'wgs84',
					success: function(res) {

						var latitude = res.latitude
						var longitude = res.longitude
						vm.lat = latitude;
						vm.lng = longitude;
						vm.addr = res.name;
						vm.getLocal(latitude, longitude)

					},
					fail: function(res) {
						console.log('fail' + JSON.stringify(res))

					}
				})
			},
			// 获取当前地理位置
			getLocal: function(latitude, longitude) {
				let vm = this;
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: latitude,
						longitude: longitude
					},
					success: function(res) {
						console.log(res)
						let province = res.result.ad_info.province
						let city = res.result.ad_info.city
						let district = res.result.ad_info.district
						vm.province = province;
						vm.city = city;
						vm.district = district;

					},
					fail: function(res) {
						console.log("fail");
						console.log(res);
					},
					complete: function(res) {
						// console.log(res);
					}
				});
			},

		}
	}
</script>

<style>
	page {
		background: #eee;
		font-size: 0.85rem;
	}

	.page-title {
		width: 94%;
		margin: 30upx auto 0;
		padding: 20rpx 0 20rpx 15rpx;
		background: #fff;
		border-radius: 14rpx;
	}

	.page-title .img {
		width: 70upx;
		height: 70upx;
		margin-right: 20upx;
	}

	.form-wrapper {
		margin: 15rpx 20rpx 20rpx;
		padding: 0 40rpx;
		box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 14rpx;
		background: #fff;
	}

	.form-wrapper .list {
		padding: 20rpx 0;
		border-bottom: 1px solid #f4f4f4;
	}

	.form-wrapper .list .name {
		margin-right: 20rpx;
		text-align-last: justify;
		text-align: justify;
		text-justify: distribute-all-lines;
		width: 130rpx;
	}

	.form-wrapper .list .icon {
		width: 40rpx;
		height: 40rpx;
	}

	.form-wrapper .list .area {
		height: 150rpx;
	}

	/* 底部操作栏 */

	.footer {
		position: fixed;
		bottom: 50rpx;
		width: 100%;
	}

	.btn-wrapper {
		height: 100%;
		display: flex;
		align-items: center;
		padding: 0 90rpx;
	}

	.btn-item {
		flex: 1;
		font-size: 35rpx;
		height: 85rpx;
		line-height: 85rpx;
		text-align: center;
		color: #fff;
		border-radius: 10rpx;
	}

	.btn-item-main {
		background: #ff4544;
	}
</style>
